<template>
	<view>
		<Navbar :isReturn="true"></Navbar>
		<view>
			<scroll-view scroll-y="true" :style="{ height: scrollHeight }" @scrolltolower="onScrollBottom">
				<view class="u-font-30 line_height_15 u-p-20">
					<view v-html="content"></view>
				</view>
			</scroll-view>
		</view>
		<view class="report_rule_box">
			<button class="report_btn" :class="btnTitle.indexOf('知晓') == -1 ? 'reportGary' : 'reportOramage'"
				@click="onGenerate">{{ btnTitle }}</button>
		</view>
	</view>
</template>

<script>
	import { getAgreement, userSignPdf } from '@/network/api.js'
	import { formatContent } from '@/utils/index.js'
	import Navbar from '@/components/Navbar.vue'
	export default {
		components:{
			Navbar
		},
		data(){
			return {
				content: '',
				btnTitle: "请上划看完本条款后同意签署",
				isAgreement: 0,
				scrollHeight: 0,
				optionData: {}
			}
		},
		onLoad(options){
			this.optionData = JSON.parse(options.data)
			this.onGetAgreement()
		},
		onReady(){
			const _this =this
			uni.getSystemInfo({
				success: (res) => {
					const statusBarHeight = res.statusBarHeight || 0;
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) *
						2;
					const topIconDistance = statusBarHeight + navBarHeight - 7;
					_this.scrollHeight = res.screenHeight - statusBarHeight - navBarHeight - 80 + 'px'
				},
				fail: (err) => {}
			})
		},
		methods:{
			onGetAgreement(){
				getAgreement({
					type: this.optionData.type
				}).then(res => {
					this.content = formatContent(res.data.content)
				})
			},
			onScrollBottom() {
				if(this.isAgreement == 0){
					this.isAgreement = 1
					this.btnTitle = "我已知晓，并同意签署用户协议"
				}
			},
			onGenerate(){
				if(this.isAgreement == 1){
					uni.showLoading({
						title: "文件正在生成中"
					})
					userSignPdf({
						...this.optionData,
						type: this.optionData.type == 23 ? 1 : 2
					}).then(res=>{
						uni.hideLoading()
						uni.navigateBack({
							delta: 1,
							success(){
								uni.$emit('update', {pdf: res.data})
							}
						})
					})
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.report_rule_box {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 80px;
		padding: 0 40rpx;
		z-index: 99;
	
		.report_btn {
			padding: 8rpx 0;
			margin: 30rpx 0;
			font-size: 28rpx;
			color: #fff;
			border-radius: 20rpx;
		}
	}
	
	.reportGary {
		background-color: #999;
	}
	
	.reportOramage {
		background-color: #fd5c48;
	}
	
	button::after {
		border: none;
	}
	
	.u-btn--warning {
		border-radius: 10px;
	}
</style>